import React, { useState, useEffect } from "react";
import { ScrollBoard } from "@jiaminghi/data-view-react";
let wrap = "display:flex;font-size:16px;border-bottom:2px solid #f00";
let left = "flex:2;text-align:left;color:#2E6FB4";
let right = "flex:1;text-align:right;color:#4BA3FD";
let labelStyle = "color:#FE8031;font-family:Arial-BoldItalicMT;font-weight:600;margin-right:8px";
let spanStyle = "color:#8996A3";
export default () => {
  const [config, setConfig] = useState({
    rowNum: 5,
    align: "center",
    carousel: "page",
    oddRowBGC: "transparent",
    evenRowBGC: "transparent",
    waitTime: 5000,
    data: [

    ],
  });
  const getData = () => {
    let eventName = ["中国运动员勇夺东奥金牌", "医生踩滑雪板救人", "东奥会参与人数突破历史", "中国冬奥会金牌突破历史"];

    setConfig((f) => {
      let data = [];
      let name = eventName[Math.floor(Math.random() * eventName.length)];
      for (let i = 0; i < 60; i++) {
        let leftDom = `<label style="${labelStyle}">NO.<span style="font-size:20px">${i + 1}</span></label><span style="${spanStyle}">#${name}#</span>`;
        let item = `<div style="${wrap}"><div style="${left}"> ${leftDom}</div> <div style="${right}">${Math.floor(Math.random() * 800)}万热度</div></div>`;
        let temp = [];
        temp.push(item);
        data.push(temp);
      }
      return { ...f, data };
    });
  };
  useEffect(() => {
    getData();
    let timer = setInterval(() => {
      getData();
    }, 6000 * 10);
    return () => {
      clearInterval(timer);
    };
  }, []);
  return (
    <div style={{ width: "100%", height: "100%" }} className="chartbg">
      <ScrollBoard
        config={config}
        style={{ width: "100%", height: "100%" }}
      />

    </div>
  );
};
